<div class="loading">
  <svg xmlns="http://www.w3.org/2000/svg" width="124" height="124" viewBox="0 0 124 124">
    <circle class="circle-loading" cx="62" cy="62" r="59" fill="none" stroke="hsl(271, 76%, 74%)" stroke-width="6px"></circle>
    <circle class="circle" cx="62" cy="62" r="59" fill="none" stroke="hsl(271, 76%, 53%)" stroke-width="6px" stroke-linecap="round"></circle>
    <polyline class="check" points="73.56 48.63 57.88 72.69 49.38 62" fill="none" stroke="hsl(271, 76%, 53%)" stroke-width="6px" stroke-linecap="round"></polyline>
  </svg>
</div>
<style>
/* From Uiverse.io by Nawsome - Tags: loader */
.loading {
  width: 124px;
  height: 124px;
}

.loading svg {
  display: block;
  width: 100%;
  height: 100%;
}

.circle {
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: circle_4 2s ease-in-out forwards;
}

.check {
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  animation: check_4 0.2s 2s ease-in-out forwards;
}

@keyframes circle_4 {
  0% {
    stroke-dashoffset: 380;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes check_4 {
  0% {
    stroke-dashoffset: 45;
  }

  100% {
    stroke-dashoffset: 90;
  }
}
</style>
